<template>
  <div style="background: white;">
    <div class="title" >
      <div style="flex: 1;">
        入库记录
      </div>
    </div>
    <!--底部按钮-->
    <div style="display: flex;">
      <x-form :rules="rulesRk" v-model="rkModel" ></x-form>
    </div>
    <div style="margin-top: 10px;">
      <tiny-grid :data="state.orders" :height="gridHeight" border size="mini" >
        <tiny-grid-column type="index" width="60"></tiny-grid-column>
        <tiny-grid-column field="billNo" title="票号" width="120"  headerAlign="center"></tiny-grid-column>
        <tiny-grid-column field="billDate" title="票据日期" width="100"  headerAlign="center" align="center"> </tiny-grid-column>
        <tiny-grid-column field="buName" title="供应商"  headerAlign="center"></tiny-grid-column>
        <tiny-grid-column field="invName" title="商品名称"  headerAlign="center"></tiny-grid-column>
        <tiny-grid-column field="spec" title="规格"  width="80" headerAlign="center"></tiny-grid-column>
        <tiny-grid-column field="price" title="单价"  width="70" headerAlign="center" align="right"></tiny-grid-column>
        <tiny-grid-column field="qty" title="数量"  width="70" headerAlign="center" align="right"></tiny-grid-column>
        <tiny-grid-column field="amount" title="金额"  width="80" headerAlign="center" align="right"></tiny-grid-column>
        <tiny-grid-column   title="操作" width="100" fixed="right" align="center">
          <template #default="data">
            <tiny-button size="mini" @click="delRow(data.row)" type="info">删除</tiny-button>
          </template>
        </tiny-grid-column>
      </tiny-grid>

<!--      <j-grid :offset-bottom="10" :offset-width="110" :></j-grid>-->
    </div>
  </div>
</template>
<script setup>
// 订单分配
import tool from "@/utils/tool";
import {computed, onBeforeMount, onMounted, ref} from "vue";
const gridHeight = ref(300)
const state = ref({
  orders: []
})
const rkModel = ref({
  beginDate: tool.getDay('',-30),
  endDate: tool.getDay(),
  billNo: '',
})
const rulesRk = ref([
  {field: 'beginDate', title: '开始日期', com: 'JPicker',width: 220  },
  {field: 'endDate', title: '结束日期', com: 'JPicker',width: 220 },
  {field: 'billNo', title: '票号', com: 'JInput',width: 220},
  {field: 'buName', title: '供应商', com: 'JInput',width: 220},
  {field: 'invName', title: '商品', com: 'JInput',width: 220},
  {field: '', text: '搜索', com: 'JButton',width: 100,events: { click: () => { search()  }  }},
])


onBeforeMount(() => {
  state.value.user = tool.data.getUser()
  getList()
})
onMounted(() => {
  gridHeight.value = window.innerHeight - 90
})

const search = () => {
  getList()
}
const getList = () => {
  tool.post('justdeliver/getRkList', {formData: rkModel.value}).then(ret => {
    if(ret.stat) {
      state.value.orders = ret.data
    }
  })
}

const delRow = (row) => {
  tool.confirm('确定删除入库单').then(ret => {
    tool.post('justdeliver/delRkItem', {id: row.id}).then(ret => {
      if(ret.stat) getList()
    })
  })
}

const footerMethod = ({ columns, data }) => {
  if (data.length === 0) {
    return [
      ['合计', '', '', '',0]
    ]
  }
  return [
    columns.map((column, columnIndex) => {
      if (columnIndex === 0) {
        return '合计'
      }
      if (column.property === 'qtyGp') {
        return data.map((item) => item[column.property]).reduce((acc, item) => acc + item)
      }
      return null
    })
  ]
}





</script>

<style scoped lang="scss">


.title {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  background-color: #01aaee;
  color: white;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.s-item {
  border-bottom: 1px solid #F2F2F2;
  padding: 5px 0;
  margin-bottom: 10px;
}


.undeliver tr:hover {
  background-color: #f8f8f9;
}

.pd2 {
  padding: 2px;
}

.grid td {
  padding-left: 2px;
}

.order {
  padding-top: 2px;
}

.br {
  border-right: 1px solid #dedede;
}

.order .grid td {
  /*background-color: white;*/
}

.bb {
  border-bottom: 1px solid #dedede;
}

.bt {
  border-top: 1px solid #dedede;
}

.bl {
  border-left: 1px solid #dedede;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.order td, .order th {
  height: 30px;
  line-height: 30px;
}

.order td {
  color: #2b85e4;
}

.order .grid tr {
  /*background-color: white;*/
}

.order .grid tr:hover {
  background-color: gainsboro;
}

.grid tr {
  /*background-color: white;*/
}

.order td i {

}

.order td i:hover {
  cursor: pointer;
  color: red;
}

.undeliver {
}

.undeliver th {
  padding: 5px 3px;
}

.undeliver td {
  padding: 5px 3px;
}

li {
  margin-top: 10px;
}
.ocr {
  td {
    border: 1px solid #01aaee;
  }
  th {
    border: 1px solid #01aaee;
  }
}

.orow:hover, .orow:active {
  background-color: #2db7f5;
  color: white;
}
</style>